<ion-content no-padding class="login">
  <ion-grid no-padding>
    <ion-row>
      <ion-col no-margin no-padding>
        <ion-icon name="logo" no-padding no-margin class="logo"></ion-icon>
      </ion-col>
    </ion-row>
    <ion-row class="login-phone">
      <ion-col col-1 ion-text text-left>
        <ion-icon name="phone" no-padding no-margin class="small-icon"></ion-icon>
      </ion-col>
      <ion-col col-7>
        <ion-input
          [ngClass]="{'text-invalid':data.phone && !validationService.isPhoneValid(data.phone)}"
          [(ngModel)]="data.phone" type="text" placeholder="请输入手机号"></ion-input>
      </ion-col>
      <ion-col col-4   ion-text text-right class="verification">
        <button [disabled]="sendingVerifyCode||!validationService.isPhoneValid(data.phone)"
                (click)="sendVerifyCode()"
                ion-button small no-margin
                class="verification-code">
          {{getVerTitle}}
        </button>
      </ion-col>
    </ion-row>
    <ion-row class="login-verifycode">
      <ion-col col-1 ion-text text-left>
        <ion-icon name="verification" no-padding no-margin class="small-icon"></ion-icon>
      </ion-col>
      <ion-col col-7>
        <ion-input [(ngModel)]="data.verifyCode" type="text" placeholder="请输入6位验证码"></ion-input>
      </ion-col>
    </ion-row>
    <button full-width ion-button no-margin  class="submit-btn"
            [disabled]="!data.phone || !data.verifyCode"
            (click)="submit()">登录</button>
    <ion-row ion-text text-center color="txt-tertiary">
      <p (click)="goProtocol()">登录即视为同意&lt;&lt;青果寓用户协议&gt;&gt;</p>
    </ion-row>
  </ion-grid>
</ion-content>
